

class PageHeader extends HTMLElement
{
    constructor() {
        super();
        this.className = "page-header header panel flex-row flex-items-center flex-content-between";
        this.innerHTML = `
            <div class="flex-row flex-content-center flex-items-center">
                <a class="header-title" href="/index.html">
                    鸽子分享网
                </a>
            </div>
            

            <div>
                <nav>
                    <ul class="flex-column flex-items-center">
                        
                        <li>
                            <a href="/pages/other.html">其他</a>
                        </li>
                        <li>
                            <a href="/pages/tool.html">工具</a>
                        </li>
                        <li>
                            <a href="/pages/sort.html">分类</a>
                        </li>
                        <li>
                            <a href="/pages/search.html">搜索</a>
                        </li>
                        <li>
                            <a href="/pages/about.html">关于</a>
                        </li>
                    </ul>
                </nav>
            </div>
        `;
    }
}

class PageFooter extends HTMLElement {
    constructor() {
        super();
        this.className = "page-footer";
        this.innerHTML = `
            <hr/>
            <div
                class="flex flex-row flex-wrap flex-items-center flex-content-center"
            >
                <a
                    class="link link-hover"
                    href="https://beian.miit.gov.cn"
                    target="_blank"
                    style="margin-right: 1em;"
                >
                    粤ICP备2023142752号
                </a>
                <div
                    class="flex flex-row flex-items-center flex-content-center"
                    style="margin-right: 1em;"
                >
                    <img src="/images/备案图标.png" style="width: 1em;vertical-align: middle;border: none;box-shadow: none;">
                    <a
                        class="link link-hover"
                        href="https://beian.mps.gov.cn/#/query/webSearch?code=44011102483712"
                        rel="noreferrer"
                        target="_blank"
                    >
                    粤公网安备44011102483712
                    </a>
                </div>

                <!-- 萌ICP -->
                <div class="flex flex-row flex-items-center">
                    <img style="width:1em;height:1em;border:none;box-shadow: none;" src="/images/icp.gov.moe.png">
                    <a
                        class="link link-hover"
                        href="https://icp.gov.moe/?keyword=20242420"
                        target="_blank"
                    >
                    萌ICP备20242420号
                    </a>
                </div>
            </div>
            

            <div class="flex flex-row flex-wrap flex-items-center flex-content-center">
                <p 
                    class="copyright"
                    style="margin-right: 1em;"
                >
                    Copyright 2023 cyue All Rights Reserved
                </p>

                <!-- RSS -->
                <div
                    class="flex flex-row flex-items-center"
                    style="margin-right: 1em;cursor: pointer;"
                >
                    <img
                        src="/images/rss.gif"
                        alt="RSS"
                        onclick="javascript:window.open('http://rss.cyue.net')"
                    >
                </div>

                <!-- 分享按钮 -->
                <div
                    style="width: 1.2em;height: 1.2em;cursor: pointer;"
                >
                    <img
                        src="/images/share.svg"
                        alt="share"
                        style="width: 100%;height: 100%;"
                        onclick="window.navigator.share({
                            title: document.title,
                            text: document.querySelector('meta[name=description]').getAttribute('content'),
                            url: window.location.href
                        })"
                    />
                </div>
            </div>
        `;
    }
}

customElements.define("page-header", PageHeader);
customElements.define("page-footer", PageFooter);


